<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3的响应式原理</title>
</head>
<body>
<script type="text/javascript">
    let person = {
        name: '张三',
        age: 18
    }
    //模拟vue2中实现响应式
    //#region
    // let p = {}
    // Object.defineProperty(p, 'name', {
    //     configurable:true,
    //     get: function () {
    //         console.log('有人获取时调用')
    //         return person.name
    //
    //
    //     },
    //     set: function (newVal) {
    //         console.log('有人修改时调用')
    //         person.name = newVal
    //
    //     }
    //
    // })
    //
    // Object.defineProperty(p, 'age', {
    //     get: function () {
    //         console.log('有人获取时调用')
    //         return person.age
    //
    //
    //     },
    //     set: function (newVal) {
    //         console.log('有人修改时调用')
    //         person.age = newVal
    //
    //     }
    //
    // })
    //#endregion

    //模拟vue3中实现响应式
    //#region
    const p = new Proxy(person,{
        get(target, prop) {
            console.log('读取',prop,target)
            // return target[prop]
            return Reflect.get(target, prop)
        },
        set(target, prop, newValue) {
            console.log('设置',target,prop,newValue)
            // target[prop] =newValue
            Reflect.set(target, prop, newValue)
        },
        deleteProperty(target, prop) {
            // return delete target[p]
            return Reflect.deleteProperty(target, prop)
        }

    })
    //#endregion

    // let obj ={a:1,b:2}
    // //返回boolean x1
    // const x1 = Reflect.defineProperty(obj,'c',{
    //     get:function (){
    //         return 3
    //     }
    // })

</script>


</body>
</html>